<!--
 * @Author: your name
 * @Date: 2020-05-24 20:14:35
 * @LastEditTime: 2020-05-24 21:02:19
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bootstrap-practice\02表单\01表单.html
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container-small{
            max-width: 500px;
        }
    </style>
</head>
<body>
    <form class="container container-small">
        <h1>注册</h1>
        <div class="form-inline form-group">
            <div class="form-group">
                <label>姓</label>
                <input type="text" class="form-control">
            </div>
            <div class="form-group">
                <label>名</label>
                <input type="text" class="form-control">
            </div>
        </div>
        <!-- 使用input的按钮,添加特定的符号 -->
        <div class="form-group">
            <label>充值金额</label>
            <div class="input-group">
                <div class="input-group-addon">$</div>
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label>Other</label>
            <select class="form-control">
                <option value="1">贝贝村</option>
                <option value="2">小欧村</option>
                <option value="3">村村</option>
            </select>
        </div>
        <!-- 表单验证显示效果 -->
        <div class="form-group has-error">
            <label class="control-label">姓</label>
            <input type="text" class="form-control">
        </div>
        <div class="form-group has-success">
            <label class="control-label">姓</label>
            <input type="text" class="form-control">
        </div>
        <div class="form-group has-warning">
            <label class="control-label">姓</label>
            <input type="text" class="form-control">
        </div>
        <!-- 大输入框 -->
        <div class="form-group">
            <label>姓</label>
            <input type="text" class="form-control input-lg">
        </div>
        <!-- 小输入框 -->
        <div class="form-group">
            <label>姓</label>
            <input type="text" class="form-control input-sm">
        </div>
        <div class="row">
            <!-- 栅格系统与输入框结合 -->
            <div class="col-sm-4">
                <input type="text" class="form-control">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control">
            </div>
        </div>
    </form>
</body>
</html>